<style lang="less" scoped src="../public.less"></style>
<script src="./trainingfee.js"></script>

<template>
    <div>

        <Row style="font-size: 15px;">
            <Col span="24">
                订单号：
                <Input v-model="queryData.billCode" clearable style="width: 15%"></Input>
                学生姓名：
                <Input v-model="queryData.studentName" clearable style="width: 15%"></Input>
                班级名称：
                <Input v-model="queryData.className" clearable style="width: 15%"></Input>
                家长号码：
                <Input v-model="queryData.parentPhone" clearable style="width: 15%"></Input>
            </Col>
            <Col span="24">
                状态：
                <Select v-model="queryData.status" style="width:15%" filterable clearable>
                    <Option :value='1'>待缴费</Option>
                    <Option :value='2'>已缴费</Option>
                    <Option :value='3'>申请退款</Option>
                    <Option :value='4'>已退款</Option>
                    <Option :value='5'>已失效</Option>
                </Select>
                学年:
                <Select v-model="queryData.classYear" style="width:15%" filterable clearable>
                    <Option :value='2016'>2016</Option>
                    <Option :value='2017'>2017</Option>
                    <Option :value='2018'>2018</Option>
                </Select>
                学期:
                <Select v-model="queryData.classSeason" style="width:15%" filterable clearable>
                    <Option v-for="item in classSeasonList" :value="item.id">{{item.name}}</Option>
                </Select>
                所在区域:
                <Select v-model="queryData.areaId" style="width:15%" filterable clearable>
                    <Option v-for="item in areaList" :value="item.id">{{item.name}}</Option>
                </Select>
            </Col>
        </Row>
        <Row style="font-size: 15px;;margin-top: 5px">
            <Col span="22">
            <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
            <span @click="refresh"><Button type="primary" icon="refresh">清空</Button></span>
            </Col>
        </Row>
        <div class="main-table">
            <Table border :columns="columns" :data="dataList"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>

        <Modal v-model="chargeDetailVisable"
               title="培训缴费"
               width="90%"
               :mask-closable="false">
            <h3>学生信息</h3>
            <Row class="table-Row">
                <Col span="3" class="table-row-title">姓名：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.name}}</Col>
                <Col span="3" class="table-row-title">性别：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.sex}}</Col>
                <Col span="3" class="table-row-title">出生日期：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.birthdate}}</Col>
                <Col span="3" class="table-row-title">身份证号：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.cardcode}}</Col>
            </Row>
            <Row class="table-Row">
                <Col span="3" class="table-row-title">家长姓名：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.parentname}}</Col>
                <Col span="3" class="table-row-title">家长手机：</Col>
                <Col span="3" class="table-row-content">{{orderDetails.parentphone}}</Col>
                <Col span="3" class="table-row-title">是否新生：</Col>
                <Col span="3" class="table-row-content"></Col>
            </Row>
            <h3>班级信息</h3>
            <Table border :columns="class_columns" :data="class_dataList"></Table>
            <h3>收费信息</h3>
            <Table border :columns="charge_columns_1" :data="charge_dataList"></Table>
            <div style="margin-top:20px;display: flex;">
                <h1>收费合计:<span style="color: red">{{orderDetails.amt}}</span></h1>
                <h1 style="margin-left: 20px">自动打折金额:<span style="color: red">0</span></h1>
                <h1 style="margin-left: 20px">打折金额:<span style="color: red">{{orderDetails.discount_amt}}</span></h1>
                <h1 style="margin-left:20px"> 应收合计:<span style="color: red">{{orderDetails.real_amt}}</span></h1>
            </div>
            <div style="text-align: center">
                <div>
                    支付方式：
                    <!--<Select style="width: 150px;" v-model="payType">-->
                        <!--<Option value=''>请选择</Option>-->
                        <!--<Option value='1'>现金</Option>-->
                        <!--<Option value='2'>余额支付</Option>-->
                        <!--<Option value='14'>微信条码支付</Option>-->
                    <!--</Select>-->
                    <Select v-model="payType" style="width: 150px;">
                        <Option value=''>请选择</Option>
                        <Option v-for="item in payTypeList" :value="item.value" :key="item.id">{{item.name}}
                        </Option>
                    </Select>
                </div>
                <div style="margin-top: 10px;">
                    <Button type="success" @click="showChargeDiscount">打折</Button>
                    <Button type="success"  @click="doPay">缴费</Button>
                </div>
                <div style="margin-top: 10px;">
                    <Button type="primary" @click="chargeDetailVisable=false;">返回</Button>
                </div>
            </div>
        </Modal>

        <Modal v-model="chargeDiscountVisable"
               title="打折"
               width="50%"
               :mask-closable="false"
               @on-ok="doDiscount">
            <h3>打折信息</h3>
            <div style="margin-top: 15px;">
                打折理由:&nbsp;<Select style="width:150px" @on-change="whenSelectDiscountType"  :label-in-value="true">
                                     <Option v-for="item in discountTypeList" :key="item.id" :value="item.discountRate" >{{ item.name }}</Option>
                               </Select>&nbsp;&nbsp;
                折扣率:&nbsp;&nbsp;<Input style="width: 30%;" @on-blur="countDiscount" v-model="discountRate"/>&nbsp;&nbsp;%
            </div>
            <div style="margin-top: 15px;">
                <Table border :columns="charge_columns_2" :data="charge_dataList"></Table>
            </div>
        </Modal>


        <Modal v-model="payNumVisible"
               title="支付中心条码支付"
               width="300px"
               :mask-closable="false"
               ok-text="支付"
               @on-ok="payByWechat"
               >
            <div style="text-align: center">
                <h3>使用扫码枪扫描用户出示的支付条码</h3>
                <h3 style="color: red;">注意：扫码前请确保光标在输入框内</h3>
                <Input v-model="payNum" clearable style="width: 200px;margin-top: 20px;"></Input>
            </div>
        </Modal>

    </div>
</template>
